<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        
        .wrap {
            width: 100%;
            height: 100%;
        }
        
        .content {
            width: 100%;
        }
        
        .pageCont {
            width: 500px;
            height: 100px;
            margin: 200px auto;
            display: flex;
        }
        
        .pageCont ul {
            display: flex;
        }
        
        span {
            padding: 0 10px;
        }
        
        select {
            width: 100px;
            height: 30px;
        }
        
        .pageCont ul li {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            margin: 0 2px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="content">

        </div>
        <div class="pageCont">
            <span class="left">上一页</span>
            <select name="" id="" class="select">
                <!-- <option value="">1</option>
                <option value="">2</option> -->
            </select>
            <ul class="nav">
                <!-- <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li> -->
            </ul>
            <span class="right">下一页</span>
        </div>
    </div>
    <script>
        // var obj = new cutPage({
        //     el: document.getElementById("pagecut"), //类挂载的元素
        //     data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], //总数据
        //     pageLength: [2, 5, 10, 15], //每页显示的数据条数；（select框显示的数据）

        //     //select框中的每页展示条数改变时触发，获取到当前选择的每页显示的条数
        //     cb1: function(data) {

        //         console.log(data)

        //     },

        //     //页码改变时触发，接受到当前页的数据
        //     cb2: function(data) {
        //         console.log(data)

        //         var html = ""
        //         data.forEach(function(i) {
        //             html += `<li>${i}</li>`
        //         });
        //         list.innerHTML = html

        //     }
        // });
        let data = [];
        for (let i = 0; i < 20; i++) {
            data.push({
                cont: `内容${i+1}`
            })
        }
        console.log(data)
        class Cutpage {
            constructor(params) {
                this.parent = this.com(params.el);
                this.leftBtn = this.com('.left', this.parent);
                this.select = this.com('.select', this.parent);
                this.nav = this.com('.nav', this.parent);
                this.rightBtn = this.com('.right', this.parent);
                this.content = this.com('.content', this.parent);

                this.data = params.data;
                this.pageLength = params.pageLength;
                this.cb1 = params.cb1;
                this.cb2 = params.cb2;
                this.init();
            }
            com(ele, parent) {
                return typeof ele === 'object' ? ele : (parent || document).querySelector(ele)
            }

            init() {
                this.limit = this.pageLength[0];
                this.pagenum = 1;
                this.renderSelect();
                this.renderList();
                this.renderContent();
                //点击事件
                this.addEvetn();
            };
            //渲染select框里的
            renderSelect() {
                this.select.innerHTML = this.pageLength.map((item) => {
                    return `<option value="${item}">每页${item}条</option>`
                }).join('')
            };
            //渲染li 
            renderList() {
                this.nav.innerHTML = '';
                this.content.innerHTML = '';
                this.size = Math.ceil(this.data.length / this.select.value * 1);
                for (let i = 0; i < this.size; i++) {
                    let li = document.createElement('li');
                    li.innerHTML = i + 1;
                    this.nav.appendChild(li)
                }
            };
            //渲染内容
            renderContent() {
                this.start = this.limit * (this.pagenum - 1);
                this.end = this.limit * this.pagenum;
                this.content.innerHTML = this.data.slice(this.start, this.end).map((item) => {
                    return `<p>${item.cont}</p>`
                }).join('')
            };
            //点击事件
            addEvetn() {
                //点击上一页
                this.leftBtn.onclick = () => {
                    if (this.pagenum > 1) {
                        this.pagenum--;
                        this.renderContent();
                    }
                }
                this.rightBtn.onclick = () => {
                    if (this.pagenum < this.size) {
                        this.pagenum++;
                        this.renderContent();
                    }
                }
                this.nav.onclick = (e) => {
                    this.pagenum = e.target.innerHTML;
                    this.renderContent();
                    this.cb1();
                }
                this.select.onchange = () => {
                    this.limit = this.select.value;
                    this.renderList();
                    this.renderContent();
                    this.cb2();
                }
            }
        }

        let page = new Cutpage({
            el: '.wrap', //类挂在元素
            data, //总数据
            pageLength: [5, 10, 15, 20], //每页显示的数据条数；（select框显示的数据）
            cb1: function() {
                console.log('cb1');
            }, //页码改变时触发
            cb2: function() {
                    console.log('cb2')
                } //select框中的每页展示条数改变时触发
        })
    </script>
</body>

</html